<%@ page import="com.walkingfiles.registry.Document" %>
<%@ page import="com.walkingfiles.registry.LogItem" %>

<!doctype html>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'document.showFiles.label', default: 'Document Files')}" />
		<g:set var="documentEntityName" value="${message(code: 'document.label', default: 'Document')}" />
		<title><g:message code="default.show.label" args="[entityName]" /></title>
        <r:script>
        Ext.onReady(function() {
            Ext.define('walkingfiles.AlfrescoItem', {
                extend: 'Ext.data.Model',
                fields: ['text', 'name', 'displayPath', 'url']

            });
            var treeStore = Ext.create('Ext.data.TreeStore', {
                model: 'walkingfiles.AlfrescoItem',
                proxy: {
                    type: 'ajax',
                    url: '<g:createLink controller="alfresco" action="index" />',
                    extraParams: {
                        documentRoot: '${documentRoot}', 
                        recursive: 'yes'
                    }
                },
                autoLoad: true                 
            });
            var directoryTree = Ext.create('Ext.tree.Panel', {
                store: treeStore,
                rootVisible: false,
                flex: 1
            });
            directoryTree.addListener('itemclick', function(tree, record, item) {
                loadFiles(record);
            });
            var documentsStore = Ext.create('Ext.data.Store', {
                model: 'walkingfiles.AlfrescoItem'
            });
            var filesGrid = Ext.create('Ext.grid.Panel', {
                store: documentsStore,
                hideHeaders: true,
                columns: [
                    {xtype:'actioncolumn', width: 20, 
                     items: [{
                        icon: "${resource(dir: 'images', file: 'document.png')}", 
                        tooltip: 'Open',
                        handler: function(grid, rowIndex, colIndex) {
                            var document = grid.getStore().getAt(rowIndex);
                            openDocument(document);
                        } 
                     }]
                    },
                    {text: 'Documents',  dataIndex: 'name', flex: 1}
                ],
                flex: 2
            });
            var explorerPanel = Ext.create('Ext.panel.Panel', {
                title: 'Archivos',
                width: '100%',
                height: 300,
                frame: true,
                renderTo: 'files-panel',
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [directoryTree, filesGrid]
            });
            function loadFiles(spaceItemRecord) {
                var displayPath = spaceItemRecord.data.displayPath;
                var name = spaceItemRecord.data.name;
                loadDocuments(displayPath, name);
            }
            function loadDocuments(displayPath, name) {
                Ext.Ajax.request({
                    url: '<g:createLink controller="alfresco" action="index" />',
                    method: 'GET',
                    params: {
                        documentRoot: displayPath + '/' + name,
                        recursive: 'no',
                        includeDocuments: 'yes'
                    },
                    success: function(response) {
                        var text = response.responseText;
                        var responseObject = Ext.JSON.decode(text);
                        var documents = responseObject.children.children.filter(isDocument);
                        documentsStore.loadData(documents);
                    }
                });
            }
            function isDocument(item) {
                return item.isContainer === false;
            }
            function openDocument(document) {
                var url = '<g:createLink controller="alfresco" action="getDocument" />';
                url += '?url=' + document.data.url;
                var properties = {
                    width: $(window).width() * 0.75, 
                    height: $(window).height() * 0.75,
                    location: '0',
                    copyhistory: '0'                    
                };
                var specs = [];
                Ext.Object.each(properties, function(k, v) {
                    specs.push(k + '=' + v);
                });
                var title = document.data.name;
                var newWindow = window.open(url, title, specs.join(','));
                if (window.focus) {newWindow.focus()}
            }
        });
        </r:script>
	</head>
	<body>
	<div id="outer">
		<g:render template="/layouts/menu"/>
        <div id="files-panel"></div>
		<g:form>
			<fieldset class="buttons">
				<g:link class="show" controller="document" action="show" id="${documentInstance?.id}"><g:message code="default.show.label" args="[documentEntityName]"/></g:link>
			</fieldset>
		</g:form>
	</div>
	</body>
</html>
